<template>
  <div id="home">

    <h1>{{ msg }}</h1>
    <h2>新闻组件</h2>

    <v-head ref="head"></v-head>

    <br />
    <button @click="broadcastNews()">给home组件广播数据</button>


  </div>
</template>



<script>
  // 引入空的vue
  import VueEvent from "../model/vueEvent.js";
  import Head from "./head.vue";
  export default {
    data() {
      return {
        msg: "新闻组件"
      };
    },
    methods: {
      broadcastNews() {
        // 广播数据
        VueEvent.$emit("to-home", this.msg);
      }

    },
    components: {
      "v-head": Head
    },
    mounted() {
      console.log("news组件渲染完毕");
      VueEvent.$on("to-news", function (data) {
        console.log(data);
      });
    }
  };
</script>

<style lang="scss">
</style>